<template>
	<div>
		<el-row style="height: 50px;line-height: 50px;text-align: left;">
			<el-button type="primary" @click="addNew">添加新用户</el-button>
		</el-row>
		<el-table :data="allUserData" stripe style="width: 100%">
			<el-table-column prop="loginName" label="用户名">
			</el-table-column>
			
			<el-table-column prop="name" label="用户类型">
                 <template slot-scope="scope">
                       {{scope.row.userType ==1 ?'管理员':'普通用户'}}
              </template>
			</el-table-column>
			<el-table-column fixed="right" label="操作">
				<template slot-scope="scope">
          	<el-button type="primary" icon="el-icon-edit" circle @click.native.prevent="update(scope.$index, allUserData)"></el-button>
					<el-button type="danger" icon="el-icon-delete" circle @click.native.prevent="delect(scope.$index, allUserData)"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- <div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage_all" :page-sizes="[15, 30, 45, 50]" :page-size="15" layout="total, sizes, prev, pager, next, jumper" :total="allCount">
			</el-pagination>
		</div> -->
    		<el-dialog title="更改用户" :visible.sync="dialogFormVisibleforUpdate" :close-on-click-modal="ss">
			<el-form :inline="true" >
					<el-form-item label="用户名:">
					<el-input v-model="updateUserData.loginName"  :disabled="true"></el-input>
				</el-form-item>
                	<el-form-item label="密码:">
					<el-input type="password" v-model="updateUserData.pwd" :disabled="true"></el-input>
				</el-form-item>
                	<el-form-item label="用户类型:">
					<el-select v-model="updateUserData.userType" placeholder="请选择用户类型">
    <el-option
      v-for="item in userType"
      :key="item.id"
      :label="item.type"
      :value="item.id">
    </el-option>
  </el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleforUpdate = false">取 消</el-button>
				<el-button type="primary" @click="sureUpdate">确 定</el-button>
			</div>
		</el-dialog>


		<el-dialog title="添加用户" :visible.sync="dialogFormVisible" :close-on-click-modal="ss">
			<el-form :inline="true" >
					<el-form-item label="用户名:">
					<el-input v-model="addUserData.LoginName" ></el-input>
				</el-form-item>
                	<el-form-item label="密码:">
					<el-input v-model="addUserData.Pwd" ></el-input>
				</el-form-item>
                	<el-form-item label="用户类型:">
					<el-select v-model="addUserData.UserType" placeholder="请选择用户类型">
    <el-option
      v-for="item in userType"
      :key="item.id"
      :label="item.type"
      :value="item.id">
    </el-option>
  </el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="sure">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
  data() {
    return {
      ss:false,
      allUserData: [],
      dialogFormVisibleforUpdate:false,
      dialogFormVisible: false, //这是编辑设备的弹窗显示
      allCount: "", //总台数
      userType:[
          {
              id:"1",
              type:"普通用户"
          },{
              id:"2",
              type:"管理员"
          }
      ],
      currentPage_all: "", //总页数
      isAdd: "true",
      getUserData: {
        isPage: false,
        // PageIndex: "",
        // PageSize: ""
      },
      updateUserData:{},
      addUserData:{
LoginName:"",
Pwd:"",
UserType:""
      }
    };
  },
  methods: {
    update(index,allUse){
    this.dialogFormVisibleforUpdate = true;
    this.updateUserData = allUse[index];
    },
    sureUpdate(){
      var data = {
        LoginName:"",
        Pwd:"",
        UserType:"",
        ID:""
      }
      data.LoginName = this.updateUserData.loginName
      data.ID = this.updateUserData.id;
      data.Pwd = this.updateUserData.pwd
      data.UserType = this.updateUserData.userType
      this.$httpRequest.post('api/User/Update',data,res=>{
        if(res.isSuccess){
 this.dialogFormVisibleforUpdate = false;
            		this.$notify({
							title: "修改用户",
							message: "成功",
							type: "success"
            });
             this.getUser();
        }else{
             
        }
      })
    },
      addNew(){
         this.dialogFormVisible = true;
      },
      sure(){
this.addUser();
      },
    getUser() {//获取用户数据
      this.allUserData = [];
      this.$httpRequest.get("api/User/GetList", this.getUserData, response => {
        if (response.isSuccess) {
          var data = response.data;
          this.allUserData = data;
        } else {
        }
      });
    },
    addUser(){
 this.$httpRequest.post("api/User/Add", this.addUserData, response => {
        if (response.isSuccess) {
            this.dialogFormVisible = false;
            		this.$notify({
							title: "新增用户成功",
							message: "成功",
							type: "success"
						});
           this.getUser();
        } else {
        }
      });
    },
    delect(index,arrData){
        var data = {
            ID:""
        }
        data.ID = this.allUserData[index].id;
         this.$httpRequest.post("api/User/Delete", data, response => {
        if (response.isSuccess) {
            		this.$notify({
							title: "用户删除成功",
							message: "成功",
							type: "success"
						});
           this.getUser();
        } else {
        }
      });
     
    }
  },
  created() {
    this.getUser()
  }
};
</script>

<style>
@import url("//unpkg.com/element-ui@2.4.7/lib/theme-chalk/index.css");
</style>